//import angular core
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ImageComponent } from './home/image/image.component';
//import my mudules
import { HeroesModule } from './heroes/heroes.module';
import { ProfileModule } from './profile/profile.module';
//import my components
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
//import my service
import { AuthGuardService } from './service/auth-guard.service';
import { ControlComponent } from './control/control.component';
import { DetailComponent } from './control/detail/detail.component';
import { GuardService } from './service/guard.service';

const routes: Routes = [
    {
        path: '',
        redirectTo: '/image',
        pathMatch: 'full'
    },
    {
        path: 'image',
        component: ImageComponent
    },
    {
        path: 'heroes',
        canActivate: [AuthGuardService],
        loadChildren: 'app/heroes/heroes.module#HeroesModule'
    },
    {
        path: 'profile',
        canActivate: [AuthGuardService],
        loadChildren: 'app/profile/profile.module#ProfileModule'
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'register',
        component: RegisterComponent
    },
    {
        path: 'control',
        component:  ControlComponent,
        canActivate: [AuthGuardService,GuardService]
    },
    {   
        path: 'a/:id', 
        component: DetailComponent ,
        canActivate: [AuthGuardService,GuardService]
    }
];


    

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

